<template>
  <div class="nav">
    <div class="nav-one">
      <div class="left">
        <span class="feature">预约平台
        </span>
      </div>
      <div class="right">
        <ul >
          <li   v-for="item of ThisNav" :key="item.id">
            <img :src="item.imgUrl" alt="" />{{item.dec}}
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'VHeader',
    data () {
      return {
        ThisNav:[{
          id:'0001',
          imgUrl:require('../assets/images2/tu5.png'),
          dec:'请登录          【免费注册】'
        },{
          id:'0002',
          imgUrl:require('../assets/images2/tu1.png'),
          dec:'体验卡预约'
        },{
          id:'0003',
          imgUrl:require('../assets/images2/tu2.png'),
          dec:'客户服务'
        },{
          id:'0004',
          imgUrl:require('../assets/images2/tu3.png'),
          dec:'网站导航'
        }
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  @import '../assets/styles/same.styl'
.nav{
  background-color:$bgcolor;
  height: 40px;
  color:dimgray;
  min-width: 1200px;
}
  .nav-one{
    width: 80%;
    margin: 0 auto;
    line-height: 40px;
    text-align: center;
    position: relative;
  }
  .left{
    float:left;
    position: absolute;
  }
  .feature{
    left:0;
  }
  .right{
    float:right;
  }

  .nav .nav-one .right ul{
    right:0;
    list-style:none;

  }
 li{
   float:left;
   margin-left:5px;
 }
.nav .nav-one .right ul li img{
  margin-right:15px;
}

</style>
